<template>
  <view class="title-box">
    <view class="title">
      <u-tag
        :text="filterTab(detail.tab)"
        class="tag-dom"
        mode="dark"
        size="mini"
      />
      <text>{{ detail.title }}</text>
    </view>
    <view class="user-info-box">
      <image
        class="title-img"
        :src="detail.author && detail.author.avatar_url"
      />
      <view>
        <view>
          <view class="username">{{
            detail.author && detail.author.loginname
          }}</view>
          <view class="num-box">
            <text>浏览：{{ detail.visit_count }}</text>
            <text>评论：{{ detail.reply_count }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { filterTab } from "@/utils/format.js";
export default {
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      filterTab,
    };
  },
};
</script>

<style lang="scss" scoped>
.title-box {
  .title {
    font-weight: 700;
    font-size: 34rpx;
    .tag-dom {
      margin-right: 10rpx;
    }
  }
  .title-img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .user-info-box {
    margin-top: 20rpx;
    display: flex;
    .username {
      font-weight: 700;
      font-size: 28rpx;
    }
    .num-box {
      text {
        margin-right: 20rpx;
        font-size: 20rpx;
      }
    }
  }
}
</style>